<template>
  <el-input size="large" class="text" v-model="model" clearable @focus="focusMobile" @blur="blurMobile" />
  <!-- 键盘 -->
  <div class="el-drawer keyboard" v-if="isKeyboard" >
    <number-keyboard @onChange="onChange" @onKeyPress="onkeyPress" :input="model" />
  </div>
</template>
<script setup lang="ts">
// 父组件调用方式<KeyBoardInput @inputVal="inputs" @closeVal="getValues"/>
import { ref, nextTick } from 'vue'
import numberKeyboard from "../../../tools/sinpleKeyboard.vue";
let model = ref('');
let isKeyboard = ref(false);
// 键盘按键的值
const onChange = (e: any) => {
  model.value = e;
  emit("inputVal",e);
};
// 键盘按键为完成和关闭时隐藏键盘
const onkeyPress = (button: any) => {
  if (button === "{enter}") {
    emit("closeVal",{isOk:true,value:model.value});
    isKeyboard.value = false;
  } else if(button === "{close}") {
    emit("closeVal",{isOk:false,value:model.value});
    isKeyboard.value = false;
  } else {

  }
};
const emit = defineEmits(["inputVal", "closeVal"]);
const focusMobile = () => {
  nextTick(() => {
    isKeyboard.value = true;
    model.value = model.value;
  });
};
const blurMobile = () => {};
</script>

<style scoped lang="less">
.el-drawer {
  // position: fixed; 
  width: 50vw;
  height: 35vh;
  bottom: 0;

  // left: 0;
  // right: 0;
  // margin: auto;
  :deep .keyboard-box {
    width: 100%;
  }
}
</style>